<template>
    <div class="app-container">
        <div class="app-container">
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
            >
                <el-form-item label="申请人" prop="applyBy">
                    <el-input
                        v-model="queryParams.applyBy"
                        placeholder="请输入申请人"
                        clearable
                        style="width: 240px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="经办人" prop="handlerName">
                    <el-input
                        v-model="queryParams.handlerName"
                        placeholder="请输入经办人"
                        clearable
                        style="width: 240px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >搜索</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                </el-form-item>

            </el-form>

            <el-table
                v-loading="loading"
                :data="list"
            >
                <el-table-column label="申请人" prop="applyBy" width="100" />
                <el-table-column
                    label="经办人"
                    prop="handlerName"
                    width="100"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="用印文件说明"
                    show-overflow-tooltip
                    min-width="220"
                    prop="description"
                />
                <el-table-column
                    label="加盖何种公章"
                    width="100"
                    prop="stampType"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.seal_manage"
                            :value="scope.row.stampType"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="服务费支付情况"
                    show-overflow-tooltip
                    min-width="150"
                    prop="servicePayment"
                />
                <el-table-column
                    label="文件份数"
                    width="100"
                    prop="fileCount"
                />
                <el-table-column
                    label="文件类别"
                    width="100"
                    prop="fileCategory"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.seal_file_type"
                            :value="scope.row.fileCategory"
                        />
                    </template>
                </el-table-column>

                <el-table-column
                    label="审批状态"
                    prop="auditStatus"
                    width="100"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.approval_status"
                            :value="scope.row.auditStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="审批原因"
                    prop="remark"
                    show-overflow-tooltip
                    width="130"
                />
                <el-table-column
                    label="操作"
                    align="center"
                    prop="loginTime"
                    width="180"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <template v-if="scope.row.auditStatus == '0'">
                            <el-button
                                size="mini"
                                type="text"
                                @click="onShow(1, scope.row)"
                                v-hasPermi="['approval:userseals:pass']"
                                >通过</el-button
                            >
                            <el-button
                                size="mini"
                                type="text"
                                style="color: red"
                                @click="onShow(2, scope.row)"
                                v-hasPermi="['approval:userseals:refuse']"
                                >拒绝</el-button
                            >
                        </template>
                        <span
                            style="color: #1890ff; font-size: 12px"
                            v-if="scope.row.auditStatus == '1'"
                        >
                            已通过
                        </span>
                        <span
                            style="color: red; font-size: 12px"
                            v-if="scope.row.auditStatus == '2'"
                        >
                            已拒绝
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <el-dialog
            :title="`审批说明`"
            :visible.sync="dialogVisible"
            width="800px"
        >
            <el-form>
                <el-form-item label="经办人：" prop="handlerName">
                    <div>{{ dataForm.handlerName }}</div>
                </el-form-item>
                <el-form-item label="日期：" prop="useDate">
                    {{ dataForm.useDate }}
                </el-form-item>
                <el-form-item label="用印文件说明：" prop="description">
                    {{ dataForm.description }}
                </el-form-item>
                <el-form-item label="文件份数：" prop="fileCount">
                    {{ dataForm.fileCount }}
                </el-form-item>
                <el-form-item label="文件类别：" prop="fileCategory">
                    <dict-tag
                        :options="dict.type.seal_file_type"
                        :value="dataForm.fileCategory"
                    />
                </el-form-item>
                <el-form-item label="加盖何种印章：" prop="stampType">
                    <dict-tag
                        :options="dict.type.seal_manage"
                        :value="dataForm.stampType"
                    />
                </el-form-item>
                <el-form-item label="附件：" prop="attachments">
                    <template v-if="dataForm.attachments">
                      <div
                          v-for="(item, index) in dataForm.attachments"
                          :key="index"
                          style="display: flex; justify-content: space-between"
                      >
                          <div>
                              {{ item.filename }}
                          </div>
                          <el-button type="text" @click="ondownload(item)">下载</el-button>
                        
                      </div>
                    </template>
                </el-form-item>

                <el-form-item label="服务费支付情况：" prop="servicePayment">
                    {{ dataForm.servicePayment }}
                </el-form-item>
                <el-form-item
                    :label="`${passParams.type == 1 ? '通过' : '拒绝'}说明`"
                    prop="auditStatus"
                >
                    <el-input
                        v-model.trim="passParams.remark"
                        placeholder="请填写"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="onSure"
                    :loading="saveLoading"
                    :disabled="!passParams.remark"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { list, audit } from "@/api/approval/useSeals";
export default {
    data() {
        return {
            queryParams: {
                reserveName: "",
                useDate: "",
                pageNum: 1,
                pageSize: 10,
                orderByColumn: "updateTime",
                isAsc: "desc",
                auditor: "1"
                // orderByColumn:'auditStatus',
                // isAsc: 'asc',
            },
            list: [],
            loading: false,
            total: 0,
            dialogVisible: false,
            passParams: {
                type: "",
                remark: "",
                id: "",
            },
            dataForm: {},
            saveLoading: false,
        };
    },
    dicts: ["seal_file_type", "seal_manage", "approval_status"],
    methods: {
       //文档下载
        ondownload(row) {
          // download({ fileName: row.filename, url: row.url });
          let resource = `${row.url}`;
          this.$download.resource(resource);
        },
        /** 拒接或者通过 */
        async onSure() {
            console.log(this.passParams);
            try {
                this.saveLoading = true;
                await audit({
                    auditStatus: this.passParams.type,
                    ...this.passParams,
                }).then((res) => {
                    this.saveLoading = false;
                    this.$message.success("保存成功");
                });
                this.dialogVisible = false;
                this.getList();
            } catch (err) {
                this.saveLoading = false;
            }
        },
        /** 拒接或者通过 */
        onShow(type, row) {
            this.dialogVisible = true;
            this.passParams.type = type;
            this.passParams.remark = "";
            this.passParams.id = row.id;
            this.dataForm = row
        },

        /** 查询菜单列表 */
        getList() {
            this.loading = true;
            list(this.queryParams).then((res) => {
                console.log("res");
                console.log(res);
                this.list = res.rows;
                this.loading = false;
                this.total = res.total;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
    mounted() {
        this.getList();
    },
};
</script>

<style></style>
